<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
	<script type="text/babel">
     //1.创建组件
     class Weather extends React.Component{
      //初始化状态
      state = {isOk : false, isMa: '吗'}

      render(){
        const {isOk,isMa} = this.state
        
        return <h1 onClick={this.changeWeather}>今天{isOk ? '好' : '不好'}{isMa}</h1>
      }

      //自定义方法--要用赋值语句的形式+箭头函数
      changeWeather = ()=>{
      const isOk = this.state.isOk
      this.setState({isOk:!isOk})
    }
      
     }

     //2.渲染组件到页面
     ReactDOM.render(<Weather/>, document.getElementById('example'))


	</script>
  </body>
</html>
